<template>
    <div>
        <p>
            <select v-model="input1" @change="changeInput2">
                <option :value="i.index" v-for="i in info" :key="i.index">{{i.city_name}}</option>
            </select>
        </p>
        <p>
            <select v-model="input2">
                <option v-for="i in info[input1-1].child" :value="i.id" :key="i.id">{{i.district_name}}
                </option>

            </select>
        </p>
    </div>
</template>
<script>
    export default {
        name: '',
        data() {
            return {
                input1: 1,
                input2: 11,
                info: [{
                    index: 1,
                    id: '123123',
                    city_name: '乌鲁木齐',
                    child: [{
                        index: 11,
                        id: '11',
                        district_name: '米东区',

                    }, {
                        index: 12,
                        id: '12',
                        district_name: '米东区',
                    }, {
                        index: 13,
                        id: '13',
                        district_name: '米东区',
                    }]
                }, {
                    index: 2,
                    id: '42341321231',
                    city_name: '昌吉',
                    child: [{
                        index: 21,
                        id: '21',
                        district_name: '昌吉1区',

                    }, {
                        index: 22,
                        id: '22',
                        district_name: '昌吉2区',
                    }, {
                        index: 23,
                        id: '23',
                        district_name: '昌吉3区',
                    }]
                }, {
                    index: 3,
                    id: '2348641846',
                    city_name: '石河子',
                    child: [{
                        index: 31,
                        id: '31',
                        district_name: '石河子1区',

                    }, {
                        index: 32,
                        id: '32',
                        district_name: '石河子2区',
                    }, {
                        index: 33,
                        id: '33',
                        district_name: '石河子3区',
                    }]
                }]
            }
        },
        methods: {
            changeInput2() {
                this.input2 = this.info[this.input1 - 1].child[0].index
            }
        }
    }
</script>